<template>
  <div id="toplist">
    <div class="modules">
      <div class="module" v-for="item in list" :key="item.id" @click="toplistDetail(item.id)">
        <div class="moduleImg">
          <img v-lazy="item.coverImgUrl" alt />
        </div>
        <div class="description">
          <div class="mask"></div>
          <div class="label">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      list: []
    };
  },
  methods: {
    //   跳转的排行榜详情
    toplistDetail(id) {
      this.$router.push("/playlist/" + id);
    }
  },

  created() {
    this.$http.get("toplist/detail").then(result => {
      this.list = result.data.list;
    });
  }
};
</script>

<style lang="scss">
#toplist {
  .modules {
    padding: 3vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .module {
      width:28vw;
      margin-bottom: 5vw;
      .moduleImg {
        width: 100%;
        img {
          width: 100%;
          border-radius: 5px;
        }
      }
      .description {
        height: 0;
        .mask {
          height: 25px;
          top: -25px;
          width: 100%;
          position: relative;
          background: rgba(255, 255, 255, 0.5);
          filter: blur(0.5);
          filter: brightness(0.8);
          border-radius: 0 0 5px 5px;
        }
        .label {
          margin: 0;
          padding: 0;
          position: relative;
          top: -50px;
        }
        font-size: 14px;
        text-align: center;
      }
    }
  }
}
</style>